<script setup lang="ts">
import { getSearchBusUserListAPI } from '@/api/business'
import { getBarcodeByDateAPI, getBarcodeTotalNumAPI } from '@/api/code'
import { busListStore } from '@/stores/modules/bus'
import type { ApplyBusiness } from '@/types/business'
import type { TotalCodeNum } from '@/types/code'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

const busStore = busListStore()

const range = ref(['', ''])
// 获取页面参数
const query = defineProps<{
  type: string
}>()

// 获取统计数据
let total = ref<TotalCodeNum>({
  allNum: 0,
  soldNum: 0,
  unsoldNum: 0,
  cancelNum: 0,
})
const getBarcodeTotalNum = async () => {
  let urlStr = `?barcodeType=${activeIndex.value + 1}&actBusId=${busStore.busList[0].id}`
  const res = await getBarcodeTotalNumAPI(urlStr)
  total.value = res.data
}

// 搜索
const form = ref({
  name:'',
  actBusId: busStore.busList[0].id,
  bindBusId: '',
  barcodeType: '',
  agentName: '',
  searchDateStart: '',
  searchDateEnd: '',
})
const dataRange = ref('')
const onDateChange = (e: any) => {
  dataRange.value = e.join('至')
  form.value.searchDateStart = e[0]
  form.value.searchDateEnd = e[1]
}
const onSubmit = () => {
  if (form.value.searchDateEnd && form.value.searchDateStart) {
    if (activeIndex.value == 0 || (activeIndex.value == 1 && form.value.bindBusId)) {
      getBarcodeByDate()
    } else {
      uni.showToast({ icon: 'none', title: '请输入搜索信息！' })
    }
  } else {
    uni.showToast({ icon: 'none', title: '请输入搜索日期' })
  }
}

// 获取商家列表
const companyList = ref<ApplyBusiness[]>([])
const getCompanyList = async () => {
  const res = await getSearchBusUserListAPI()
  companyList.value = res.data
  companyList.value.map(item => {
    item.text = item.name
    item.value = item.id
  })
}

// 按日期获取码列表
const dataList = ref<any>()
const getBarcodeByDate = async () => {
  let urlStr = `?bindBusId=${form.value.bindBusId}&barcodeType=2&actBusId=${form.value.actBusId}&searchDateStart=${form.value.searchDateStart}&searchDateEnd=${form.value.searchDateEnd}`
  if (activeIndex.value == 1) {
    urlStr = urlStr + `&bindBusId=${form.value.bindBusId}`
  }
  const res = await getBarcodeByDateAPI(urlStr)
  dataList.value = res.data
  if (res.code == '1') {
    uni.showToast({ icon: 'none', title: res.msg})
  } else {
    uni.showToast({ icon: 'none', title: '获取成功'})
  }
}

// 选择承销商
const onChangeType = (e: any) => {
  form.value.bindBusId = e
}

const activePanel = ref([])
const activePanelChildren = ref([])

const myCollapse = ref()
const handleOpenChange = (index: any) => {
  setTimeout(() => {
    myCollapse.value.children[index].init()
  }, 20)
}
const activeIndex = ref(0)

onLoad(() => {
  getBarcodeTotalNum()
  getCompanyList()
})

</script>

<template>
  <view class="viewport">
    <!-- 外销码列表 -->
    <scroll-view scroll-y class="orders">
      <view class="top_total">
        <view class="label"><text>总数:</text>{{ total.allNum }}</view>
        <view class="label"><text>已售出:</text>{{ total.soldNum }}</view>
        <view class="label"><text>未售出:</text>{{ total.unsoldNum }}</view>
        <view class="label"><text>作废:</text>{{ total.cancelNum }}</view>
      </view>
      <!-- 表单内容 -->
      <view class="form">
        <view class="form-content">
          <view class="form-item" style="border: none;">
            <text class="label" style="padding-top: 5px;">选择承销商：</text>
            <uni-data-select
              class="picker"
              :value="form?.bindBusId"
              :localdata="companyList"
              :map="{text:'name',value:'id'}"
              @change="onChangeType"
            >
              <view v-if="form?.name">{{ form?.name }}</view>
              <view class="placeholder" v-else>请选择</view>
            </uni-data-select>
          </view>
          <view class="form-item">
          <text class="label">日期</text>
            <uni-datetime-picker
              v-model="range"
              type="daterange"
              rangeSeparator="至"
              @change="onDateChange"
            >
              <view v-if="dataRange">{{ dataRange }}</view>
              <view class="placeholder" v-else>请选择日期</view>
            </uni-datetime-picker>
          </view>
          <!-- 提交按钮 -->
          <button class="form-button" @tap="onSubmit">搜索配送信息</button>
        </view>
      </view>
      <view class="list" v-if="dataList">
        <view class="code_list">
          <view class="code_item">
            <view class="mouth_item">
              <text>{{ dataList.dateInfo }}</text>
              <text>数量：{{ dataList.num }}</text>
            </view>
            <view class="mouth content">
              <uni-collapse v-model="activePanel" accordion>
                <uni-collapse-item
                  :open="secItem.open"
                  v-for="(secItem, index1) in dataList.scanDateGroupList"
                  :key="secItem.id"
                  @change="handleOpenChange(index1)"
                >
                  <template v-slot:title>
                    <div class="day_title">
                      <text>{{ secItem.dateGroup }}</text>
                      <text>数量：{{ secItem.num }}</text>
                    </div>
                  </template>
                  <view class="day content day_item">
                    <uni-collapse v-model="activePanelChildren" accordion>
                      <uni-collapse-item v-for="itemUser in secItem.scanList" :key="itemUser.userName">
                        <template v-slot:title>
                          <view class="people_nav">
                            <text>配送员：{{ itemUser.deliveryName }}</text>
                            <text>数量{{ itemUser.scanNum }}个</text>
                          </view>
                        </template>
                        <view class="people_content">
                          <view class="content_item content_title">
                            <view class="business_name">承销商</view>
                            <view class="business_code">乐促码</view>
                            <view class="business_time">激活时间</view>
                            <view class="handle"></view>
                          </view>
                          <navigator
                            :url="'/pages/codeDetail/codeDetail?id=' + itemBus.id"
                            class="content_item"
                            v-for="(itemBus, index3) in itemUser.businessList"
                            :key="index3"
                          >
                            <view class="business_name">{{ itemBus.bindBusName }}</view>
                            <view class="business_code">{{ itemBus.activeCode }}</view>
                            <view class="business_time">{{ itemBus.activateTime }}</view>
                            <view class="handle"
                              ><uni-icons type="right" size="20" color="#ddd"></uni-icons
                            ></view>
                          </navigator>
                        </view>
                      </uni-collapse-item>
                    </uni-collapse>
                  </view>
                </uni-collapse-item>
              </uni-collapse>
            </view>
          </view>
        </view>
      </view>
      <no-list v-else></no-list>
    </scroll-view>
  </view>
</template>
<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.top_total {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 10px 20px;
  background-color: #fff;
  font-size: 28rpx;
  .label {
    width: 50%;
    margin: 5px 0;
    text {
      display: inline-block;
      width: 120rpx;
      color: #666;
    }
  }
}

.form {
  height: auto;
  padding-bottom: 10px;
  .form-content {
    overflow: hidden;
  }
}
.list {
  padding-bottom: 30px;
}
::v-deep .is-open + .uni-collapse-item__wrap {
  height: auto !important;
}

.code_item {
  border-bottom: 1px solid #ddd;
  font-size: 26rpx;
  background-color: #fff;
  .mouth_item,
  .day_title {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
  }
  .mouth {
    border: 1px solid #eee;
  }
  .mouth_item {
    background: #27ba9b;
    color: #fff;
  }
  .day_title {
    background-color: #d0f3eb;
  }
  .people_nav,
  .content_title,
  .content_item {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
  }
  .people_nav {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #eee;
  }
  .content_item {
    border-top: 1px solid #eee;
    .business_name {
      width: 80px;
    }
    .business_code {
      width: 100px;
    }
    .business_time {
      width: 80px;
    }
    .handle {
      width: 25px;
    }
  }
}

.list .title {
  display: flex;
  justify-content: space-between;
  padding-right: 5px;
  align-items: center;
  padding-left: 15px;
  height: 40px;
  background-color: #27ba9b;
  text {
    font-weight: normal;
    color: #fff;
    font-size: 14px;
  }
  .timePicker {
    width: 70%;
  }
}

// tabs
.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  margin: 0 10rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
  position: relative;
  z-index: 9;

  .item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    font-size: 28rpx;
    color: #262626;
  }

  .cursor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30%;
    height: 6rpx;
    padding: 0 50rpx;
    background-color: #27ba9b;
    /* 过渡效果 */
    transition: all 0.4s;
  }
}

// swiper
.swiper {
  background-color: #f7f7f8;
}
</style>
